<template>
  <PageView
      :scrollable="false"
      ref="pageViewRef"
      :layout-vars="{showFooter:total>0}"
      v-loading="loading"
      :element-loading-text="loadingText"
  >

    <template #header>
      <div class="app-section-header">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
          <el-form-item
              label="申请人"
              prop="name"
          >
            <el-input
                v-model="queryParams.name"
                placeholder="请输入姓名"
                clearable
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item
              label="手机号"
              prop="phone"
          >
            <el-input
                v-model="queryParams.phone"
                placeholder="请输入手机号"
                clearable
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item
              label="身份证号"
              prop="idCard"
          >
            <el-input
                v-model="queryParams.idCard"
                placeholder="请输入身份证号"
                clearable
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item
              label="状态"
              prop="verifyStatus"
          >
            <el-select
                style="width: 130px"
                v-model="queryParams.licenseStatus"
                placeholder="请选择"
            >
              <el-option
                  v-for="item in queryParamsOptionsStates"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button type="danger" icon="Upload" @click="uploadQuery">推送当前页数据</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <template v-slot:default="{contentHeight}">
      <el-table
          ref="table"
          v-if="contentHeight>0"
          :data="tableData"
          :height="contentHeight"
          border
          scrollbar-always-on
          @selection-change="handleSelectionChange"
      >
        <!--   单元格序号   -->
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" width="180" align="center"></el-table-column>
        <el-table-column prop="driverLicenseNumber" label="驾驶证编号" width="180" align="center"></el-table-column>
        <el-table-column prop="driveType" label="准驾车型" align="center"></el-table-column>
        <el-table-column prop="driverLicenseEndDate" label="驾驶证有效期" width="170" align="center">
          <template v-slot="scope">
            <div>至{{getShowTime(scope.row.driverLicenseEndDate, 'yyyy-MM-dd')}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="driverLicenseIssueOrganization" label="驾驶证发证机关" width="300" align="center"></el-table-column>
        <el-table-column prop="qualificationNumber" label="从业资格证号" width="180" align="center"></el-table-column>
        <el-table-column prop="idCardFrontFilename" label="身份证" align="center">
          <template v-slot="scope">
            <div class="link-type" @click="scanDriverInfo(scope, 0)">查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="licenseFilename" label="驾驶证" align="center">
          <template v-slot="scope">
            <div class="link-type" @click="scanDriverInfo(scope, 1)">查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="qualificationLicenceMainFilename" label="从业资格证" align="center">
          <template v-slot="scope">
            <div class="link-type" @click="scanDriverInfo(scope, 2)">查看</div>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="首次入库来源" width="250" align="center"></el-table-column>
        <el-table-column prop="createTime" label="入库时间" width="170" align="center">
          <template v-slot="scope">
            <div>{{getShowTime(scope.row.createTime, 'yyyy-MM-dd')}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="carLicensePlate" label="关联车辆" width="180" align="center"></el-table-column>
        <el-table-column prop="payee" label="默认收款账户" width="180" align="center"></el-table-column>
        <el-table-column prop="auditorName" label="审核人" width="180" align="center"></el-table-column>
        <el-table-column prop="auditorPhone" label="审核人手机号" width="180" align="center"></el-table-column>
        <el-table-column prop="auditTime" label="审核日期" width="170" align="center">
          <template v-slot="scope">
            <div>{{getShowTime(scope.row.auditTime, 'yyyy-MM-dd')}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="licenseStatus" label="证件状态" width="170" align="center">
          <template v-slot="scope">
            <div :class="getLicenseStatusStyleClass(scope.row)">{{getLicenseStatusDes(scope.row)}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
          :title="dialogTitle"
          v-model="dialogVisible"
          width='361px'
          append-to-body
      >
        <div v-for="(item, index) in urls">
          <ImagePreview
              class="info-image"
              :key="index"
              :width="321"
              :height="170"
              :src='item'
          />
        </div>
      </el-dialog>
    </template>

    <template #footer>
      <div class="app-section-footer">
        <Pagination
            v-show="total>0"
            :total="total"
            :pageSize="queryParams.pageSize"
            :currentPage="queryParams.pageNum"
            @pagination="getList"
        />
      </div>
    </template>

  </PageView>
</template>

<script lang="ts" setup>

</script>

<style>

</style>

<script>
/* eslint-disable */
import {getDriverInfo,  getDriverImageInfo} from "@/api/khy-operatingcenter";
import { getTimeWithFormatter, util } from '@/utils/util'
import {uploadKhyDriver} from "@/api/ky-api/ky-api";
export default {
  name: "DriverInfo",
  components:{
  },
  props:{

  },
  data() {
    return {
      tableData:[],
      multipleSelection:[],

      // 加载状态
      loading:false,
      loadingText:'',

      // 分页相关参数
      total:0,

      // 是否显示搜索
      showSearch:true,

      // 查询参数相关
      queryParams:{
        pageNum:1,
        pageSize:this.$store.state.pageSizeMax,
        auditTimeStart:null,
        auditTimeEnd:null,
        auditorName:null,
        auditorPhone:null,
        idCard:null,
        licenseStatus:null,
        name:null,
        phone:null,
        submitSource:null,
      },

      // 审核状态
      queryParamsOptionsStates: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "2",
          label: "未到期",
        },
        {
          value: "4",
          label: "已到期",
        },
      ],

      // 控制弹窗显示
      dialogVisible:false,
      dialogTitle:"查看",
      urls:[],
    }
  },
  beforeCreate() {

  },
  setup() {

  },
  created() {
    this.getList()
  },
  mounted() {
    console.log('路由传入的参数信息', this.$route.query)
    console.log('获取分页数据')
  },
  activated() {
    console.log('keep-alive被激活时调用')
  },
  methods:{
    getList(pageInfo) {
      this.loading = true
      this.updatePageInfo(pageInfo)

      let param = this.queryParams

      let baseUrl = this.getFileBaseUrl()

      getDriverInfo(param).then(res => {
        const result = res.data ? res.data : {}
        this.loading = false
        this.total = result.total

        let arr = result.records;
        arr.forEach(item => {
          if (item.idCardFrontFilename) {
            item.idZUrl = baseUrl + item.idCardFrontFilename;
          }
          if (item.idCardBackFilename) {
            item.idFUrl = baseUrl + item.idCardBackFilename;
          }
          if (item.licenseFilename) {
            item.driverLicenseUrl = baseUrl+ item.licenseFilename;
          }
          if (item.qualificationLicenceMainFilename) {
            item.qualificationLicenceMainUrl = baseUrl + item.qualificationLicenceMainFilename;
          }
          if (item.qualificationLicenceMainFilename) {
            item.qualificationLicenceSideUrl = baseUrl + item.qualificationLicenceMainFilename;
          }
        })
        this.tableData = arr
      }).catch(err => {
        console.log('获取司机审核数据失败：', err)
      })
    },

    /**
     * 获取展示的时间
     * @param time
     * @returns {string}
     */
    getShowTime(time, formatter) {
      return getTimeWithFormatter(time, formatter)
    },

    /**
     * 获取证件状态描述
     * @param row
     */
    getLicenseStatusDes(row) {
      // 驾驶证状态
      let licenseStatus = row.licenseStatus;
      // 身份证状态
      let idCardStatus = row.idCardStatus;
      let str = '未到期';
      if (licenseStatus == 4 && idCardStatus == 4) {
        str = "驾驶证、身份证已到期"
      } else {
        if (licenseStatus == 4) {
          str = "驾驶证已到期"
        }
        if (idCardStatus == 4) {
          str = "身份证已到期"
        }
      }
      return str
    },

    /**
     * 获取证件状态样式
     * @param row
     * @returns {string}
     */
    getLicenseStatusStyleClass(row) {
      let des = this.getLicenseStatusDes(row)
      return des == "未到期" ? 'licenseStatus-s' : 'licenseStatus-n'
    },

    /**
     * 分页组件变动 更新分页标记数据
     * @param val
     */
    updatePageInfo(val) {
      if (val) {
        this.queryParams.pageSize = val.pageSize
        this.queryParams.pageNum = val.pageNum
      }
    },

    /**
     * 单元格多选方法
     * @param val
     */
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      console.log('当前选择的单元格数据', this.multipleSelection)
    },

    /**
     * 搜索按钮点击事件
     */
    handleQuery() {
      console.log('handleQuery:', this.queryParams)
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 查询表单重置
     */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },

    /**
     * 获取单元行的样式类名 - 注意：需要放到全局样式
     * @param row
     * @param rowIndex
     * @returns {string}
     */
    tableRowClassName({row, rowIndex}) {
      // console.log('rowIndex:', rowIndex)
      if (rowIndex == 1) {
        return 'warning-row';
      } else if (rowIndex == 3) {
        return 'success-row';
      } else if (rowIndex == 9) {
        return 'danger-row';
      }
      return '';
    },

    /**
     * 将查询到的数据同步保存至开运系统
     */
    uploadQuery() {
      if (this.tableData.length == 0) {
        return
      }
      this.loading = true;
      this.loadingText = "导入中..."
      const data = {
        platform:this.$store.state.customerName,
        data:this.tableData,
      }
      uploadKhyDriver(data).then(res => {
        console.log('导入司机数据到开运成功')
        this.loading = false
        this.$message.success('本页数据导入成功')
      }).catch(err => {
        console.log('导入司机数据到开运失败')
        this.loading = false
      })
    },

    /**
     * 姓名点击事件
     */
    nameClicked() {
      // 开一个新的二级页面
      this.$router.push('/main/userInfo')
    },

    /**
     * 弹窗关闭
     */
    handleClose() {
      this.dialogVisible = false
    },

    editBtnClicked() {
      console.log('编辑')
    },

    deleteBtnClicked() {
      console.log('删除')
      this.$modal.showConfirmAlert('提示', '确认删除吗?')
          .then(() => {

            this.$message.success('删除成功')
          })
          .catch(() => {
            this.$message.info('取消')
          })
    },


    /**
     * 查看司机详情信息图片
     * @param scope 查看行
     * @param type 查看类型 0身份证图片
     */
    scanDriverInfo(scope, type) {
      if (scope) {
        let row = scope.row
        let title = scope.column.label
        let str = ''
        let arr = []
        if (type == 0) {
          // 身份证
          arr.push(row.idZUrl);
          arr.push(row.idFUrl);
        } else if (type == 1) {
          // 驾驶证
          arr.push(row.driverLicenseUrl);
        } else {
          // 从业资格证 主页和副业
          if (row.qualificationLicenceMainFilename) {
            arr.push(row.qualificationLicenceMainUrl);
          }
          if (row.qualificationLicenceSideFilename) {
            arr.push(row.qualificationLicenceSideUrl);
          }
        }

        this.urls = arr
        this.dialogTitle = title
        this.dialogVisible = true

        // const param = {
        //   filenames:arr
        // }
        // let imageUrls = []
        // getDriverImageInfo(param).then(res => {
        //   console.log('获取图片信息：', res)
        //   let data = res.data ? res.data : {}
        //   for (const imageKey of arr) {
        //     const imageInfo = data[imageKey]
        //     const imageUrl = imageInfo.url
        //     imageUrls.push(imageUrl)
        //   }
        //   console.log('imageUrls:', imageUrls)
        //   this.urls = imageUrls
        //   this.dialogTitle = title
        //   this.dialogVisible = true
        // }).catch(err => {
        //   console.log('获取图片信息失败：', err)
        // })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
// 引入公共样式文件 scss
@import '../../assets/styles/public.scss';

.licenseStatus-n {
  color: $warning-color;
}

.licenseStatus-s {
  color: $blue;
}

/*在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。可以写到一个样式文件中 引入即可*/
.el-table .warning-row {
  background-color: $warning-color;
}

.el-table .success-row {
  background-color: $success-color;
}

.el-table .danger-row {
  background-color: $danger-color;
}

// 查看docx文档时 生成的盒子
:deep(.docx-wrapper) {
  background-color: #fff;
  padding: 0;
}

:deep(.docx-wrapper > section.docx) {
  width: 100% !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
}

</style>
